<template>
  <div class="findResult">
    <div class="heard">
      <van-nav-bar @click-left="gofind" class="back">
        <template #left>
          <i class="iconfont">&#xe632;</i>
        </template>
        <template #title>
          <div class="title">
            搜索结果页面
          </div>
        </template>
      </van-nav-bar>
    </div>
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <div class="content">
        <ul class="journalism-list">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <li
              @click="goDetails(item)"
              class="journalism-item"
              v-for="(item, index) in list"
              :key="index"
            >
              <div class="item-top">
                <span>{{ item.title }}</span>
              </div>
              <div class="item-middle">
                <img
                  :src="item1"
                  alt=""
                  v-for="(item1, index) in item.cover.images"
                  :key="index"
                />
              </div>
              <div class="item-bottom">
                <span>{{ item.aut_name }}</span>
                <span>{{ item.comm_count }}评论</span>
                <span>{{ item.pubdate | formatTime }}</span>
              </div>
            </li>
          </van-list>
        </ul>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>
import { v1Search } from '@/api/find.js'
export default {
  name: 'findResult',
  data () {
    return {
      isLoading: false,
      list: [],
      artid: '', // 文章id
      autid: '', // 作者id
      total_count: 0,
      finished: false,
      loading: false,
      // 页码
      page: 1,
      // 页容量
      pageSize: 10
    }
  },
  activated () {
    window.scrollTo(0, this.$route.meta.scrollTop)
  },
  methods: {
    gofind () {
      this.$router.push('/find') // 去到过来的页面
    },
    async onLoad () {
      this.page++
      // const y = {
      //   page: (this.page - 1) * this.pageSize,
      //   perPage: this.pageSize
      // }
      // const q = this.$route.query.q
      // console.log(q)
      const res = await v1Search({
        page: this.page,
        perPage: this.pageSize,
        q: this.$route.query.q
      })
      // console.log(res)
      // this.list = res.data.data.results
      window.console.log(res)
      this.list.push(...res.data.data.results)
      this.total_count = res.data.data.total_count
      this.loading = false
      if (res.data.data.total_count <= this.list.length) {
        this.finished = true
      }
    },
    goDetails (item) {
      this.$router.push(`/details?id=${item.art_id}&path=/findResult?q=${this.$route.query.q}`)
    },
    onRefresh () {
      setTimeout(() => {
        this.$toast('刷新成功')
        this.isLoading = false
      }, 1000)
    }
  }
  // 进入页面发送请求
  //   async created () {
  //     // const y = {
  //     //   page: 1,
  //     //   per_page: 3
  //     // }
  //     const q = this.$route.query.q
  //     console.log(q)
  //     const res = await v1Search({
  //       q,
  //       page: 1
  //     })
  //     // console.log(res)
  //     this.list = res.data.data.results
  //   }
}
</script>

<style lang="less" scoped>
.heard {
  position: fixed;
  z-index: 9999;
  top: 0;
  width: 100%;
  .back {
    background-color: #d0584d;
    color: #fff;
  }
  .title {
    color: #fff;
  }
}
   .content {
     margin-top: 80px;
  padding: 0px 15px;
  .journalism-list {
    .journalism-item {
      border-bottom: 1px solid #f5f6f7;
      padding-bottom: 3px;
      .item-top {
        display: flex;
        margin-top: 20px;

        span {
          font-weight: 600;
          // padding: 20px 0;
          font-size: 16px;
          color: #323233;
        }
      }
      .item-middle {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        margin-bottom: 15px;
        img {
          width: 100px;
          height: 80px;
          // object-fit: cover;
        }
      }
      .item-bottom {
        position: relative;
        // height: 20px;
        span {
          padding-right: 15px;
          font-size: 12px;
          color: #ccc;
        }
        .iconfont {
          position: absolute;
          right: 15px;
          top: 14px;
          font-size: 20px;
          color: #908e8c;
        }
      }
    }
  }
}
</style>
